<template>
  <div class="rich-text-display-container">
    <div>
      <!-- <div v-if="isEditorShow">
        <Editor :editorId="editorId" :defaultConfig="editorConfig" :default-html="defaultHtml" />
      </div>
      <p v-else>loading</p>-->
      <div v-if="articleContent">
        <Editor :editorId="editorId" :defaultConfig="editorConfig" :default-html="articleContent" />
      </div>
      <p v-else>loading</p>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, defineProps } from 'vue'
import { Editor, getEditor, removeEditor } from '@wangeditor/editor-for-vue'

import { useArticleStore } from '../../store/article'
const articleStore = useArticleStore()

const props = defineProps({
  articleContent: String
})

// 定义一个编辑器 id ，要求：全局唯一且不变！！！
const editorId = 'wangeEditor-display'

// 编辑器配置
const editorConfig = {
  readOnly: true
}

// // 模拟 ajax 异步获取内容
// const defaultHtml = ref('')
// const isEditorShow = ref(false)
// setTimeout(() => {
//   // defaultContent (JSON 格式) 和 defaultHtml (HTML 格式) ，二选一
//   defaultHtml.value = articleStore.articleContent.content
//   isEditorShow.value = true
// })

// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
  const editor = getEditor(editorId)
  if (editor == null) return

  // 销毁，并移除 editor
  editor.destroy()
  removeEditor(editorId)
})

</script>

<style scoped>
.rich-text-display-container {
  background-color: #fff;
}

.rich-text-display-container :deep(.w-e-textarea-1[data-slate-editor]) {
  padding: 0 !important;
}
.rich-text-display-container :deep(h1) {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 10px;
}
.rich-text-display-container :deep(h2) {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
}
.rich-text-display-container :deep(h3) {
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 10px;
}
.rich-text-display-container :deep(p) {
  margin: 8px 0px 0px 0px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400px;
  color: #323233;
}
.rich-text-display-container :deep(ul) {
  list-style: initial;
  margin: 10px 0 10px 20px;
}
.rich-text-display-container :deep(ol) {
  list-style: decimal;
  margin: 10px 0 10px 20px;
}
.rich-text-display-container :deep(.w-e-textarea-video-container) {
  border: none;
  width: 100%;
  padding: 0;
}
.rich-text-display-container :deep(iframe) {
  width: 100%;
}
.rich-text-display-container :deep(.w-e-textarea-divider) {
  margin: 0;
}
.rich-text-display-container :deep(blockquote) {
  display: block;
  border-left: 4px solid #dcdee0 !important;
  color: #8c96a0 !important;
  padding-left: 15px !important;
  line-height: 1.6 !important;
  margin: 10px 0 15px !important;
  background-color: #f7f8fa !important;
}
.rich-text-display-container :deep(blockquote > span) {
  background-color: transparent !important;
}
.rich-text-display-container :deep(img) {
  border-radius: 3px;
}
</style>
